<template>
  <div class="friend">
    <Header style="position: fixed;z-index: 1;" title="农友"></Header>
    <div class="place"></div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell @click="lookC(item)" v-for="item in list" :key="item.id">
          <div class="truncheon">
            <van-cell class="bod">
              <img :src="item.author_avatar" style="width:100%;height:100%" />
            </van-cell>
            <div class="wids">
              <div class="texts">{{ item.title }}</div>
              <div class="tiemr">{{item.created_at}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
      <!-- <div class="list-ss">
          <div
            class="h-marg"
            @click="lookC(item)"
            v-for="item in nouser"
            :id="item.id"
            :key="item.id"
          >
            <div class="bod">
              <img :src="item.author_avatar" style="width:100%;height:100%" />
            </div>
            <div class="wids">
              <div class="texts">{{ item.title }}</div>
              <div class="tiemr">
                <span>{{item.created_at}}</span>
              </div>
            </div>
          </div>
      </div>-->
      <div style="height:8rem"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { post } from "../api/http";
import qs from "qs";
import Header from "../components/header";
import { Toast } from "vant";
export default {
  components: {
    Header: Header,
  },
  data() {
    return {
      nouser: [],
      footerbottom: "",
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        for (let i = 0; i < 10; i++) {
          this.list.push(this.nouser);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if ((this.list = this.nouser)) {
          this.finished = true;
        }
      }, 1000);
    },
    //下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    send() {
      this.$axios.post("http://127.0.0.1:1995/article/query").then((res) => {
        console.log(res);
        this.nouser = res.data.datas.article;
      });
    },
    lookC(index) {
      console.log(index.id);
      this.$router.push({ path: "/ncontent", query: { id: index.id } });
    },
  },
  created() {
    this.send();
  },
};
</script>


<style scoped>
.truncheon {
  display: fixed;
}

.wids {
  width: 79%;
  height: 82px;
  float: right;
  background-color: #fff;
  border-top: 1px solid rgba(168, 167, 167, 0.31);
  border-bottom: 1px solid rgba(168, 167, 167, 0.42);
}

.h-marg {
  margin-top: 0rem;
}

.list-ss {
  width: 100%;
  /* scroll-margin-top: 45px; */
}

.van-cell {
  padding: 0 !important;
}

.bod {
  width: 5rem;
  border: 1px solid rgb(238, 235, 235);
  height: 5.1rem;
  float: left;
  margin-left: 0px;
}

.texts {
  width: 100%;
  text-align: left;
  height: 57px;
}

.tiemr {
  height: 21px;
  margin-top: 0px;
  color: #a4bcbc;
  text-align: left;
}

.place {
  height: 3rem;
}
</style>
